<template lang="pug">
  .container
    .name {{courseName}}
    .week
      el-row
        el-col(:span="16")
          el-radio-group.tabTypes(v-model="curWeekId" @change="change")
            el-radio-button(v-for="(item, index) in weekList" :key="item.id" :label="item.id") {{item.name}}
        el-col(:span="8")
          .detail
            el-button.gradientVertical(size="large" round @click="detailHandle") 教保指引
    s-table(
      v-if="curWeekId"
      ref="table"
      :reqUrl="reqUrl"
      dataKey="list"
      reqMethod="POST"
      :column="tableObj.column"
      :queryPropsParams="{ vendorPackageId: curWeekId }"
    )
      template(slot="action" slot-scope="text, scope")
        el-link( @click="actionHandle(scope, 'view')" type="primary") 详情
    week-drawer(:visible.sync="infoVisible" :id="curWeekId" :courseName="courseName")
</template>

<script>
import { column } from './config'
import WeekDrawer from './components/weekDrawer'
import { getWeekListByCourse } from './api'
export default {
  components: {
    WeekDrawer
  },
  data () {
    return {
      weekList: [],
      curWeekId: '',

      tableObj: {
        column
      },

      infoVisible: false
    }
  },
  computed: {
    courseId () {
      return this.$route.query.courseId
    },
    courseName () {
      return this.$route.query.courseName
    },
    reqUrl () {
      return 'api/vendor_courseV2/weekCourseList'
    }
  },
  created () {
    this.getWeekList()
  },
  mounted () {
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function('event.returnValue=false')
      // 禁用选择
      document.onselectstart = new Function('event.returnValue=false')
    })
  },
  beforeDestroy () {
    console.log('courseInfo destory')
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function('event.returnValue=true')
      // 禁用选择
      document.onselectstart = new Function('event.returnValue=true')
    })
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    actionHandle (row, type) {
      this.goInfo(row)
    },
    goInfo (course) {
      this.$router.push({
        path: '/educational/courseManage/course/detail',
        query: {
          courseId: course.id
        }
      })
    },
    change () {
      console.log('change')
      this.refreshTable(true)
    },
    // 查看详情
    detailHandle () {
      this.infoVisible = true
    },

    getWeekList () {
      const courseId = this.courseId
      getWeekListByCourse({ vendorPackageId: courseId }).then(res => {
        this.weekList = res || []
        this.curWeekId = this.weekList[0] ? this.weekList[0].id : ''
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  display: flex;
  flex-direction: column;
  .name{
    font-weight: bold;
    font-size: 20px;
  }
  .week{
    margin-top: 20px;
    margin-bottom: 20px;

    .detail{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
